<template>
    <div class="main-left">
        <!-- 产业园情况 -->
        <div class="products">
            <div class="echartTitles echartTitles-none">
                <div class="title-name">
                    产业园情况
                </div>
            </div>
            <div class="products-list">
                <div class="title">入园企业（家）:<span class="nums">22</span></div>
                <div class="devCharts">
                    <div class="devleft" ref="devleft"></div>
                    <div class="devright" ref="devright"></div>
                </div>
            </div>
        </div>
        <!-- 基础建设 -->
        <div class="devs">
            <div class="echartTitles" @click="titleClick('devType')">
                <div class="title-name">
                    基础建设
                </div>
            </div>
            <div class="devs-list" v-if="showItme">
                <div class="dev-top">
                    <div class="top-item" v-for="(item, index) in ranks" :key="index">
                        <div class="item-name">{{ item.name }}</div>
                        <div class="item-num" :class="index == 1 ? 'item-nums' : ''">{{ item.num }}</div>
                    </div>
                </div>
                <div class="dev-rank">
                    <div class="rank-box" v-for="(item, index) in ranks" :key="item.name">
                        <div class="rank-title">
                            <img :src="item.backgroundImg" alt="">
                            <span class="rank-s" :style="{ color: index == 1 ? '#FFF400' : '#00FFD8' }">{{ item.title
                            }}</span>
                        </div>
                        <div class="input-range">
                            <div class="input-top" :style="{ color: item.color }"><span class="range-name">{{ item.rankName
                            }}</span> <span>{{ item.rang }}</span></div>
                            <span class="ranges" :style="{ backgroundColor: item.backgroundColor }"><span
                                    class="range-value"
                                    :style="{ width: index != 2 ? item.rang : '100%', backgroundColor: item.color }"></span></span>
                        </div>
                    </div>
                </div>
            </div>
            <dv-loading v-else style="color: #fff;">Loading...</dv-loading>
        </div>
        <!-- 园区动态 -->
        <div class="news">
            <div class="echartTitles" @click="titleClick('newsType')">
                <div class="title-name">
                    园区动态
                </div>
            </div>
            <div class="news-list">
                <dv-loading v-if="!showItme" style="color: #fff;">Loading...</dv-loading>
                <dv-scroll-board v-else :config="configs" style="width:100%;height: 100%;" />
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-gl";
export default {
    props: ['leftData'],
    data() {
        return {
            showItme: false,
            firstData: [
                {
                    name: '智慧园区',
                    value: 6,
                    keys: 'wisdomFruitNum',
                    itemStyle: {
                        color: "rgba(36,104,255,.9)"
                    }
                },
                {
                    name: '普通园区',
                    value: 16,
                    keys: 'normalFruitNum',
                    itemStyle: {
                        color: "rgba(255,245,77)"
                    }
                },
            ],
            secondData: [
                {
                    name: "公司",
                    value: 14,
                    keys: "compFruitNum",
                    itemStyle: {
                        color: '#F6FD9C',
                    },
                },
                {
                    name: "合作社",
                    value: 8,
                    keys: "cooperativeNum",
                    itemStyle: {
                        color: '#72EBD8',
                    },
                },
                {
                    name: "私人",
                    value: 0,
                    keys: "person",
                    itemStyle: {
                        color: '#85D5FF',
                    },
                }
            ],
            ranks: [
                { name: "IOT设备数", backgroundImg: require('../assets/shebei.png'), num: 0, unit: "（套）", title: "IOT", rankName: '在线设备占比', color: "#70DBBE", rang: "", backgroundColor: "rgba(75, 121, 109, 0.7)" },
                { name: "已覆盖企业数", backgroundImg: require('../assets/fugai.png'), num: 0, unit: "（家）", title: "覆盖", rankName: '入园企业覆盖率', color: "#B2CF83", range: "", backgroundColor: "rgba(125, 145, 93, 0.7)" },
                { name: "预警设备", backgroundImg: require('../assets/yujing.png'), num: 0, unit: "（套）", title: "预警", rankName: '预警数量', color: "#6AC9E8", rang: "", backgroundColor: "rgba(73, 136, 157, 0.7)" }
            ],
            configs: {},
            devType: {
                propOption: [
                    { name: '镇', value: "镇" },
                    { name: '村', value: "村" },
                    { name: '果园', value: "果园" },
                ],
                title: "IOT设备",
                times: false,
            },
            newsType: {
                propOption: [],
                title: "园区动态",
                times: false,
            },
        }
    },
    mounted() {
        this.$nextTick(()=>{
            this.firstEchart();
            this.secondEchart()
        })
    },
    watch: {
        leftData: {
            handler(newValue) {
                // console.log(newValue)
                //处理头部数据
                // for (let i in newValue.top) {
                //     this.firstData.forEach(v => {
                //         if (v.keys == i) v.value = newValue.top[i]
                //     })
                //     this.secondData.forEach(s => {
                //         if (s.keys == i) s.value = newValue.top[i]
                //     })
                // }
                // 中间数据
                this.ranks[0].num = newValue.center.devTotal
                this.ranks[1].num = newValue.center.coverCompNum
                this.ranks[2].num = newValue.center.alarmDevNum
                this.ranks[0].rang = newValue.center.onlineRatio
                this.ranks[1].rang = newValue.center.coverCompNumRatio
                this.ranks[2].rang = newValue.center.alarmNum
                //下部数据
                let datas = newValue.bottom.map((v, i) => {
                    return [`<span style="color:#4CD061;font-weight: normal;">${i + 1}、</span>`, `<span style="color:#ffffff;">${v.title}</span>`]
                })
                this.configs = {
                    data: datas,
                    index: false,
                    columnWidth: [55, 480],
                    hoverPause: true,
                    align: ["center"],
                    oddRowBGC: "rgba(255, 255, 255, 0)",
                    evenRowBGC: "rgba(255, 255, 255, 0)",
                    headerBGC: "rgba(6, 75, 115, 0.25)",
                }
                this.showItme = true
                this.$nextTick(()=>{
                    this.firstEchart();
                    this.secondEchart()
                })
            },
            deep: true,  // 深度监听
        }
    },
    methods: {
        firstEchart() {
            let myChart = echarts.getInstanceByDom(this.$refs.devleft);
            if (myChart == undefined) {
                myChart = echarts.init(this.$refs.devleft);
            }
            myChart.clear();
            const series = this.getPie3D(this.firstData, 0.7, 240, 28, 26, 0.5);
            // 传入数据生成 option
            series.push({
                name: 'pie2d',
                type: 'pie',
                label: {
                    opacity: 1,
                    lineHeight: 12,
                    fontSize: 12,
                    color:'#fff',
                    overflow:"none",
                },
                labelLine: {
                    length: 10,
                    length2: 0,
                    lineStyle: {
                        width: 1, // 线条的宽度
                        color: "#fff", //线的颜色
                    }
                },
                startAngle: 180, //起始角度，支持范围[0, 360]。
                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
                radius: ['20%', '20%'],
                center: ['45%', '45%'],
                data: this.firstData,
                itemStyle: {
                    opacity: 0,
                },
            });
            let option = {
                animation: true,
                tooltip: {
                    formatter: params => {
                        if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
                            return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value + '家'}`;
                        }
                    },
                    textStyle: {
                        fontSize: 12
                    },
                },
                title: {
                    x: 'center',
                    top: '20',
                    color: '#fff',
                    fontSize: 14,
                },
                xAxis3D: {
                    min: -1,
                    max: 1,
                },
                yAxis3D: {
                    min: -1,
                    max: 1,
                },
                zAxis3D: {
                    min: -1,
                    max: 1,
                },
                grid3D: {
                    show: false,
                    boxHeight: 0.6,
                    bottom: '50%',
                    viewControl: {
                        distance: 250,
                        alpha: 10,
                        beta: 200,
                        autoRotate: false, // 自动旋转
                    },

                },

                series: series,
            };
            if (option && typeof option === "object") {
                myChart.setOption(option);
            }
        },
        secondEchart() {
            let myChart = echarts.getInstanceByDom(this.$refs.devright);
            if (myChart == undefined) {
                myChart = echarts.init(this.$refs.devright);
            }
            myChart.clear();
            let data = this.secondData
            let names = this.secondData.map(v => { return v.name })
            let option = {
                backgroundColor: "",
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(13, 64, 71, 0.50)',
                    borderColor: 'rgba(143, 225, 252, 0.60)',
                    padding: 8,
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,
                    }
                },
                grid: {
                    top: '25%',
                    right: '5%',
                    left: "15%",
                    bottom: '20%'
                },
                xAxis: [{
                    name: "",
                    type: 'category',
                    data: names,
                    axisLine: {
                        lineStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    axisLabel: {
                        margin: 10,
                        color: '#FFFFFF',
                        fontSize: 12
                    },
                    axisTick: {
                        show: false
                    }
                }],
                yAxis: [{
                    name: "家",
                    axisLabel: {
                        formatter: '{value}',
                        color: '#FEFFED',
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#808080'
                        }
                    }
                }],
                series: [{
                    type: 'bar',
                    data: data,
                    barWidth: '30%',
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(192, 235, 114, 1)' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(246, 253, 156, 1)' // 100% 处的颜色
                        }], false),
                    },
                    label: {
                        show: true,
                        lineHeight: 10,
                        formatter: '{c}',
                        position: 'top',
                        color: '#FEFFED',
                        fontSize: 12
                    }
                }]
            };
            myChart.setOption(option);
        },
        // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
        getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
            // 计算
            let midRatio = (startRatio + endRatio) / 2;

            let startRadian = startRatio * Math.PI * 2;
            let endRadian = endRatio * Math.PI * 2;
            let midRadian = midRatio * Math.PI * 2;

            // 如果只有一个扇形，则不实现选中效果。
            if (startRatio === 0 && endRatio === 1) {
                isSelected = false;
            }

            // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
            k = typeof k !== 'undefined' ? k : 1 / 3;

            // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
            let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
            let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

            // 计算高亮效果的放大比例（未高亮，则比例为 1）
            let hoverRate = isHovered ? 1.05 : 1;

            // 返回曲面参数方程
            return {

                u: {
                    min: -Math.PI,
                    max: Math.PI * 3,
                    step: Math.PI / 32
                },

                v: {
                    min: 0,
                    max: Math.PI * 2,
                    step: Math.PI / 20
                },

                x: function (u, v) {
                    if (u < startRadian) {
                        return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
                    }
                    if (u > endRadian) {
                        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
                    }
                    return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
                },

                y: function (u, v) {
                    if (u < startRadian) {
                        return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
                    }
                    if (u > endRadian) {
                        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
                    }
                    return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
                },

                z: function (u, v) {
                    if (u < - Math.PI * 0.5) {
                        return Math.sin(u);
                    }
                    if (u > Math.PI * 2.5) {
                        return Math.sin(u);
                    }
                    return Math.sin(v) > 0 ? 16 * height : -1;
                }
            };
        },

        // 生成模拟 3D 饼图的配置项
        getPie3D(pieData, internalDiameterRatio) {
            let series = [];
            let sumValue = 0;
            let startValue = 0;
            let endValue = 0;
            let legendData = [];
            let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
            // 为每一个饼图数据，生成一个 series-surface 配置
            for (let i = 0; i < pieData.length; i++) {

                sumValue += pieData[i].value;

                let seriesItem = {
                    name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
                    type: 'surface',
                    parametric: true,
                    wireframe: {
                        show: false
                    },
                    pieData: pieData[i],
                    pieStatus: {
                        selected: false,
                        hovered: false,
                        k: k
                    }
                };

                if (typeof pieData[i].itemStyle != 'undefined') {

                    let itemStyle = {};

                    typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
                    typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;

                    seriesItem.itemStyle = itemStyle;
                }
                series.push(seriesItem);
            }

            // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
            // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
            for (let i = 0; i < series.length; i++) {
                endValue = startValue + series[i].pieData.value;
                series[i].pieData.startRatio = startValue / sumValue;
                series[i].pieData.endRatio = endValue / sumValue;
                series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);

                startValue = endValue;

                legendData.push(series[i].name);
            }
            // // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
            series.push({
                name: 'mouseoutSeries',
                type: 'surface',
                parametric: true,
                wireframe: {
                    show: false,
                },
                itemStyle: {
                    opacity: 0.8,
                    color: '#001346',
                    pieStatus: {
                        selected: false,
                        hovered: false,
                        k: 0
                    }
                },
                parametricEquation: {
                    u: {
                        min: 0,
                        max: Math.PI * 2,
                        step: Math.PI / 20,
                    },
                    v: {
                        min: 0,
                        max: Math.PI,
                        step: Math.PI / 20,
                    },
                    x: function (u, v) {
                        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
                    },
                    y: function (u, v) {
                        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
                    },
                    z: function (u, v) {
                        return Math.cos(v) > 0 ? 2 : -5;
                    },
                },
            });
            series.push({
                name: 'mouseoutSeries',
                type: 'surface',
                parametric: true,
                wireframe: {
                    show: false,
                },
                itemStyle: {
                    opacity: 0.8,
                    color: '#0048c5',
                    pieStatus: {
                        selected: false,
                        hovered: false,
                        k: 0
                    }
                },

                parametricEquation: {
                    u: {
                        min: 0,
                        max: Math.PI * 2.5,
                        step: Math.PI / 20,
                    },
                    v: {
                        min: 0,
                        max: Math.PI,
                        step: Math.PI / 20,
                    },
                    x: function (u, v) {
                        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.3;
                    },
                    y: function (u, v) {
                        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.3;
                    },
                    z: function (u, v) {
                        return Math.cos(v) > 0 ? 2 : -7;
                    },
                },
            });
            return series;
        },
        //title点击
        titleClick(e) {
            this.$emit('titleHandler', this[e])
        }
    }
}
</script>
<style lang="less" scoped>
.echartTitles-none{
    background-image: url('../assets/title-none.png');
    cursor:auto;
}
.main-left {
    width: 25%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .products {
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;

        .products-list {
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;

            .title {
                font-size: 14px;
                font-weight: 500;
                color: #71F286;
                width: 100%;
                height: 50px;
                display: flex;
                align-items: center;
                padding-left: 60px;
            
                .nums {
                    font-size: 24px;
                    font-weight: bold;
                    color: #74FFEA;
                    margin-left: 20px;
                }
            }

            .devCharts {
                flex: 1;
                width: 100%;
                display: flex;

                .devleft {
                    width: 50%;
                    height: 100%;
                    position: relative;
                }

                .devright {
                    width: 50%;
                    height: 100%;
                }

                .devleft::after {
                    content: "";
                    width: 1px;
                    height: 80%;
                    position: absolute;
                    right: 0;
                    top: 0;
                    background-color: #1F3C10;
                }
            }
        }
    }

    .devs {
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;

        .devs-list {
            flex: 1;
            width: 100%;
            display: flex;
            flex-direction: column;

            .dev-top {
                width: 100%;
                display: flex;
                justify-content: space-between;
                padding:0 10px;
                .top-item {
                    display: flex;
                    flex-direction: column;
                    gap: 12px;

                    .item-name {
                        font-size: 14px;
                        font-weight: bold;
                        color: #57F071;
                        text-align: center;
                    }

                    .item-num {
                        font-size: 18px;
                        font-weight: bold;
                        color: #D2FF00;
                        text-align: center;
                    }

                    .item-nums {
                        color: #51FFF9;
                    }
                }
            }

            .dev-rank {
                width: 100%;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: flex-start;
                .rank-box {
                    width: 100%;
                    display: flex;
                    gap: 10px;

                    .rank-title {
                        width: 60px;
                        height: 30px;
                        position: relative;

                        img {
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            left: 0;
                            top: 0;
                        }

                        .rank-s {
                            width: 100%;
                            height: 100%;
                            z-index: 99999;
                            position: absolute;
                            text-align: center;
                            line-height: 30px;
                            font-size: 12px;
                            font-weight: 500;
                            left: 0;
                            top: 0;
                        }
                    }

                    .input-range {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        margin-bottom: 5px;
                        .input-top {
                            width: 98%;
                            display: flex;
                            justify-content: space-between;

                            .range-name {
                                display: block;
                                font-size: 12px;
                                font-family: Source Han Sans CN;
                                font-weight: 400;
                            }
                        }


                        .ranges {
                            display: block;
                            width: 98%;
                            height: 12px;

                            .range-value {
                                display: block;
                                height: 100%;
                            }
                        }
                    }
                }
            }
        }
    }

    .news {
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        .news-list {
            width: 100%;
            flex: 1;

        }
    }
}
</style>
<style>
.dv-scroll-board {
    .rows {
        .row-item {
            border-bottom: 1px dotted #153F1C !important;
        }
    }
}

</style>